<template>
	<view class="content" @click.self="printTitle">
		<view class="text-area">
			<text class="title">{{title}}</text>
			<view>{{age}}</view>
		</view>  
	</view>
</template>

<script lang="ts">
	import { Component,Vue ,Watch} from "vue-property-decorator";
	@Component({})
	export default class Idnex extends Vue{
		private　title:String  = 'myTitle'; //响应式属性
		private num:Number = 123;           //对标之前的data函数返回的对象
		get age():Number{                   //计算属性
			return this.num;
		}
		onLoad(){
			this.printTitle();
			let a:string = '123'; 
		}
		@Watch('title')                    //watch，此处是监听title的变化
		titleChange(newVal:Number,oldVal:Number){
			console.log(newVal,oldVal);
		}
		printTitle():void{                //methods
			console.log('hahahhhaha')
		}
		
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

